<template>
  <div class="ann-annotation" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10">
    <div class="ann-markups" style="height: 100%"></div>

    <div v-show="showTools" class="ann-tools">
      <div class="ann-annotation-style">
        <div
          v-for="item in toolConfigs.shape"
          :class="{ 'selected': selectedShape === item }"
          class="item"
          :Key="item"
          @click="handleShapeClick(item)"
        >
          <i :class="['icon-annotation', 'annotation-' + item, { 'selected': selectedShape === item }]"></i>
        </div>
        <!--        颜色-->
        <div class="ann-combox">
          <div class="item">
            <i :style="{ background: selectedColor }" class="ann-color"></i>
          </div>
          <div class="ann-choose-list ann-choose-list-color">
            <div
              v-for="(item, index) in toolConfigs.colors"
              :key="index"
              :class="{ 'selected': selectedColor === item }"
              class="item"
              @click="handleColorClick(item)"
            >
              <i :key="index" :style="{ background: item }" class="ann-color"></i>
            </div>
          </div>
        </div>

        <div v-if="selectedShape !== 'wenben1'" class="ann-combox">
          <div class="item">
            <i :style="{ background: selectedColor }" class="ann-line"></i>
          </div>
          <div class="ann-choose-list">
            <div
              v-for="(item, index) in toolConfigs.lineWidth"
              :key="index"
              :class="{ 'selected': selectedLineWidth === item }"
              class="item"
              @click="handleLineWidthClick(item)"
            >
              <i :key="index" :style="{ height: item + 'px', background: selectedColor }" class="ann-line"></i>
            </div>
          </div>
        </div>

        <div v-if="selectedShape === 'wenben1'" class="ann-combox">
          <div class="item">
            <i class="ann-size">{{ selectedSize }}</i>
          </div>
          <div class="ann-choose-list">
            <div
              v-for="(item, index) in toolConfigs.fontSize"
              :key="index"
              :class="{ 'selected': selectedSize === item }"
              class="item"
              @click="handleFontSizeClick(item)"
            >
              <i :key="index" class="ann-size">{{ item }}</i>
            </div>
          </div>
        </div>
      </div>

      <div v-if="!toolConfigs.hideHistoryGroup" class="ann-annotation-style ann-annotation-control">
        <div :class="{ 'ann-disable': undoArr.length < 1 }" class="item" @click="hadleUndo">
          <i class="icon-annotation annotation-chexiao"></i>
        </div>
        <div :class="{ 'ann-disable': redoArr.length < 1 }" class="item" @click="handleRedo">
          <i class="icon-annotation annotation-huifu"></i>
        </div>
        <div
          :class="{ 'ann-disable': selectedAnnotation.id === false }"
          class="item"
          @click="handleDeleteSelectAnnotation"
        >
          <i class="icon-annotation annotation-lajitong"></i>
        </div>
        <div class="item" @click="handleResetAnnotation">
          <i class="icon-annotation annotation-shuaxin"></i>
        </div>
      </div>

      <div v-if="!toolConfigs.hideSaveGroup" class="-style ann-save">
        <el-button class="btn-save" type="primary" size="mini" @click="handleSave"> 保存 </el-button>
        <el-button class="btn-cancel" size="mini" @click="handleCancel"> 取消 </el-button>
      </div>
    </div>

    <!--    <div v-show="!showTools" class="tuichu" @click="handleCancel">-->
    <!--      <i class="icon-annotation annotation-guanbi1"></i>-->
    <!--      <span>退出标注</span>-->
    <!--    </div>-->
  </div>
</template>

<script>
export default {
  // data toolConfigs

  data() {
    return {}
  },

  methods: {
    toolbarStatus(status) {
      this.showTools = status
    },
    // 保存
    handleSave() {
      this.annotationInstance.save()
    },

    // 取消
    handleCancel() {
      this.annotationInstance.destroy()
    },

    // 清空画布
    handleResetAnnotation() {
      this.annotationInstance.cleanAnnotation()
    },

    // 取消
    hadleUndo() {
      this.annotationInstance.undo()
    },


    // 重做
    handleRedo() {
      this.annotationInstance.redo()
    },

    // 删除选中批注
    handleDeleteSelectAnnotation() {
      this.annotationInstance.deleteSelectedAnnotation()
    },

    // 字体大小
    handleFontSizeClick(size) {
      this.selectedSize = size
      this.annotationInstance.setAnnotationFontSize(size)
    },

    // 线条高度
    handleLineWidthClick(height) {
      this.selectedLineWidth = height
      this.annotationInstance.setAnnotationLineWidth(height)
    },

    // 颜色修改
    handleColorClick(color) {
      this.selectedColor = color
      this.annotationInstance.setAnnotationColor(color)
    },

    // 图形选择
    handleShapeClick(key) {
      this.selectedShape = key
      this.annotationInstance.setAnnotationType(key)
    }
  }
}
</script>

<style lang="less" scoped>
.ann-annotation {
  .ann-markups {
    svg {
      height: 100%;
    }
  }

  .ann-tools {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    z-index: 99;

    .ann-annotation-style {
      white-space: nowrap;
      border: 1px solid #333;
      background-color: rgba(17, 17, 17, 0.88);
      display: flex;
      flex-direction: row;
    }

    .ann-color {
      width: 24px;
      height: 24px;
      border-radius: 100px;
      border: 2px solid #fff;
      display: block;
      background: red;
    }

    .ann-line {
      height: 3px;
      background: red;
      width: 25px;
      display: block;
    }

    .ann-size {
      font-size: 16px;
    }

    .ann-combox {
      position: relative;

      &:after {
        position: absolute;
        right: 5px;
        top: 3px;
        content: '';
        border-bottom: 5px solid #fff;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        opacity: 0.6;
      }

      &:hover .ann-choose-list {
        display: flex;
      }
    }

    .ann-choose-list {
      position: absolute;
      bottom: 50px;
      background-color: rgba(17, 17, 17, 0.88);
      flex-direction: column;
      display: none;
    }

    .item {
      color: #fff;
      opacity: 0.6;
      height: 50px;
      width: 50px;
      cursor: pointer;
      -webkit-font-smoothing: antialiased;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 4px solid transparent;
      box-sizing: border-box;

      .ann-iconfont {
        font-size: 32px;
        &.ann-icon-shanchu-3 {
          font-size: 24px;
        }
      }

      .annotation-changjiantou-shang {
        transform: rotate(45deg);
      }

      &:hover {
        opacity: 1;
      }

      &.ann-disable {
        opacity: 0.35;

        .ann-iconfont {
          cursor: default;
        }

        &:hover {
          opacity: 0.35;
        }
      }

      &.selected {
        background-color: rgba(136, 136, 136, 0.4);
        border-bottom: 4px solid #888;
        opacity: 1;
      }
    }

    .ann-annotation-control {
      margin-left: 2px;

      .ann-icon-zhongshi {
        font-size: 20px;
        height: 26px;
      }

      // .item .ann-icon-delete {
      //     font-size: 22px;
      //     height: 30px;
      // }
    }

    .ann-save {
      margin-left: 2px;
      align-items: center;
      padding: 0 12px;

      .btn-save {
        width: 60px;
        line-height: 28px;
      }
      .btn-cancel {
        width: 60px;
        margin-left: 12px;
        line-height: 28px;
      }
    }
  }

  .tuichu {
    background-color: rgba(0, 0, 0, 0.68);
    border: 1px solid #333;
    border-radius: 4px;
    bottom: 20px;
    box-sizing: border-box;
    left: 50%;
    position: absolute;
    transform: translate(-50%);
    white-space: nowrap;
    z-index: 8;

    height: 32px;
    padding: 0 8px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    cursor: pointer;
    i {
      font-size: 14px;
      margin-right: 6px;
    }
  }

  .icon-annotation {
    font-size: 24px;
  }
}
</style>
